function Page(classname,obj={}){
    this.obj = obj
    this.show = obj.show || function(){}
    this.default = {
        pageData:{
            total:100,
            pageSize:12,
        },
        symbol:{
            first:"首页",
            prev:"上一页", 
            list:'',
            next:"下一页", 
            last:"末页" 
        }
    }
    this.setDefault()
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
    this.currentPage = 1
    this.list = null
    this.box = document.querySelector('.'+classname)
    this.container = document.createElement('div')
    this.setStyle(this.container,{
        width:"100%",
        height:"50px",
        display:"flex",
        justifyContent:"center",
        "align-items":"center"
    })
    this.container.onmouseover = ()=>{
        this.container.style.cursor = "pointer"
    }
    this.container.onselectstart = ()=>{
        return false;
    }
    this.box.appendChild(this.container)
    this.createTag()
    this.init()
    this.skip()
    this.tabPage()
}
Page.prototype.init = function(){
    this.createPage()
    this.setDisabled()
    // this.container.children[5].value = this.currentPage
    this.show(this.currentPage)
}
Page.prototype.skip = function(){
    var input = document.createElement('input')
    input.setAttribute('type','number')
    this.container.appendChild(input)
    this.setStyle(input,{
        outline: 'none',
        padding: '6px',
        border: '1px solid #ccc',
        width: '46px',
        height: '32px',
        margin:"0 5px"
    })
    var btn = document.createElement('button')
    btn.innerText = 'GO';
    this.container.appendChild(btn)
    this.setStyle(btn,{
        width: '46px',
        height: '33px',
        outline: 'none',
        border: '1px solid #ccc',
        margin: '0 5px',
        "background-color": 'skyblue',
    })
    btn.onmouseover = ()=>{
        btn.style.cursor = "pointer"
    }
}
Page.prototype.setDisabled = function(){
    if(this.currentPage === 1){
        this.container.children[0].style.backgroundColor = '#eee';
        this.container.children[1].style.backgroundColor = '#eee';
        this.container.children[0].setAttribute('disabled','true')
        this.container.children[1].setAttribute('disabled','true')
    }else{
        this.container.children[0].style.backgroundColor = 'transparent';
        this.container.children[1].style.backgroundColor = 'transparent';
        this.container.children[0].removeAttribute('disabled')
        this.container.children[1].removeAttribute('disabled')
    }
    if(this.currentPage === this.totalPage){
        this.container.children[3].style.backgroundColor = '#eee';
        this.container.children[4].style.backgroundColor = '#eee';
        this.container.children[3].setAttribute('disabled','true')
        this.container.children[4].setAttribute('disabled','true')
    }else{
        this.container.children[3].style.backgroundColor = 'transparent';
        this.container.children[4].style.backgroundColor = 'transparent';
        this.container.children[3].removeAttribute('disabled')
        this.container.children[4].removeAttribute('disabled')
    }
}
Page.prototype.tabPage = function(){
    this.container.onclick = e=>{
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.className === 'first' && target.getAttribute('disabled')!=='true'){
            this.currentPage = 1
            this.init()
        }else if(target.className === 'prev' && target.getAttribute('disabled')!=='true'){
            this.currentPage--
            this.init()
        }else if(target.className === 'next' && target.getAttribute('disabled')!=='true'){
            this.currentPage++
            this.init()
        }else if(target.className === 'last' && target.getAttribute('disabled')!=='true'){
            this.currentPage = this.totalPage
            this.init()
        }else if(target.tagName === "P" && target.innerText-0 !== this.currentPage){
            this.currentPage = target.innerText-0
            this.init()
        }else if(target.tagName === 'BUTTON' && this.currentPage!==target.previousElementSibling.value-0){
            if(target.previousElementSibling.value-0>=this.totalPage){
                target.previousElementSibling.value = this.totalPage
            }
            if(target.previousElementSibling.value-0<=1){
                target.previousElementSibling.value = 1
            }
            this.init()
        }
    }
}
Page.prototype.createP = function(start,end){
    for(var i=start;i<=end;i++){
        var p = document.createElement('p')
        p.innerText = i;
        this.setStyle(p,{
            margin:"5px",
            padding:"5px",
            border:"1px solid #ccc"
        })
        if(i === this.currentPage){
            p.style.backgroundColor = 'orange';
        }
        this.list.appendChild(p)
    }
}
Page.prototype.createPage = function(){
    this.list.innerHTML = '';
    if(this.totalPage<=5){
        this.createP(1,this.totalPage)
    }else{
        if(this.currentPage<=3){
            this.createP(1,5)
        }
        else if(this.currentPage>=this.totalPage-2){
            this.createP(this.totalPage-4,this.totalPage)
        }
        else{
            this.createP(this.currentPage-2,this.currentPage+2)
        }
    }
}
Page.prototype.setStyle = function(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}
Page.prototype.createTag = function(){
    for(var attr in this.default.symbol){
        var div = document.createElement('div')
        div.innerText = this.default.symbol[attr]
        if(attr !== 'list'){
            this.setStyle(div,{
                margin:"5px",
                padding:"5px",
                border:"1px solid #ccc"
            })
        }else{
            this.list = div
            this.setStyle(div,{
                display:"flex",
                justifyContent:"center",
                alignItems:"center"
            })
        }
        div.className = attr
        this.container.appendChild(div)
    }
}
Page.prototype.setDefault = function(){
    for(var attr in this.obj.pageData){
        this.default.pageData[attr] = this.obj.pageData[attr]
    }
    for(var attr in this.obj.symbol){
        this.default.symbol[attr] = this.obj.symbol[attr]
    }
}